<template>
	<view class="content fofa">
		<tabnav title="个人中心" :col="back" :left_icon="false"></tabnav>
		<view class="wid100 coFFF" style="height: 340rpx;" :style="'background-color: '+back+';'" v-if="Object.keys(userinfo).length > 0 && Object.keys(datalist).length > 0">
			<view style="height: 50rpx;"></view>
			<view class="wid87 mar dis disAl disJuB">
				<view>
					<view class="dis disAl">
						<view class="foSi35 mar-right20" style="">{{datalist.nickname}}</view>
					</view>
					<view class="dis disAl mar-top30"  v-if="datalist.usertype != 1">
						<view class="foSi25 mar-right20">{{datalist.ent_name}}</view>
						<image src="https://www.sign.run/applet/static/index/renzheng.png" style="width: 29rpx;height: 29rpx;"></image>
					</view>
				</view>
				<view class="dis disAl" @click="tiaozhuan('/pages/wode/details/details')">
					<view class="foSi25 mar-right20">查看个人信息</view>
					<uni-icons size="20" color="#fff" type="right"></uni-icons>
				</view>
			</view>
			<view class="wid87 mar mar-top20 foSi25 " style="display: flex;">
				<!-- {{datalist.usertype == 1 ? datalist.mobile : datalist.auth_name}} -->
				<view class="" v-for="(item,index) in datalist.authlist" style="margin-right: 10rpx;">
					{{item.roleName}}
				</view>
			</view>
		</view>
		<view class="wid100 coFFF" style="height: 340rpx;" :style="'background-color: '+back+';'" v-else @click="tiaozhuan('/pages/login/login')">
			<view style="height: 50rpx;"></view>
			<view class="wid87 mar dis disAl disJuB">
				<view style="font-size: 30rpx;margin-top: 20rpx;">
					<span style="font-size: 40rpx;">登录/注册</span><span style='margin-left: 10rpx;font-size: 35rpx;'>></span><br>
					<span style="margin-top: 20rpx;font-size: 30rpx;display: block;">登陆后即可体验电子签服务</span>
				</view>
				<view class="dis disAl" @click="tiaozhuan('/pages/wode/details/details')">
				</view>
			</view>
		</view>
		<view class="wid87 mar box1 bacFFF dis disAl borRad20" style="height: 139rpx;margin-top: -66rpx;">
			<view class="wid90 mar dis disAl disJuB">
				<view class="foSi28" :style="'color: '+back+';'">创建专属签名/印章，随心签署更方便</view>
				<view class="dis disAl disJuC coFFF foSi20 borRad10" @click="tiaozhuan('/pages/wode/sealSignature')"
				style="width: 92rpx;height: 42rpx;" :style="'background-color: '+back+';'">去创建</view>
			</view>
		</view>
		<view class="wid87 mar box1 bacFFF borRad20 mar-top30" v-if="Object.keys(userinfo).length > 0">
			<view class="wid90 mar dis disAl disJuB" style="height: 100rpx;" @click="tiaozhuan('/pages/wode/corporateSeal')" v-if="datalist.usertype > 1">
				<view class="dis disAl">
					<view class="" style="width: 80rpx;">
						<view class="mar poRel" style="width: 44rpx;height: 44rpx;">
							<view class="bacFFF poAbs" style="width: 44rpx;height: 44rpx;left: -100%;z-index: 10;"></view>
							<image :src="aurl+iconlist.c1" class="wh100" :style="'filter: drop-shadow(44rpx 0 '+
								back+');transform: translateZ(0px);margin-left: -100%;'"></image>
						</view>
					</view>
					<view class="foSi25" style="">我持有的企业印章</view>
				</view>
				<uni-icons size="20" type="right" color="#ded5d5"></uni-icons>
			</view>
			<view v-if="datalist.usertype > 1" class="xia wid100"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 100rpx;" @click="tiaozhuan('/pages/wode/enterpriseTel')" v-if="datalist.usertype > 1">
				<view class="dis disAl">
					<view class="" style="width: 80rpx;">
						<view class="mar poRel" style="width: 44rpx;height: 44rpx;">
							<view class="bacFFF poAbs" style="width: 44rpx;height: 44rpx;left: -100%;z-index: 10;"></view>
							<image :src="aurl+iconlist.c2" class="wh100" :style="'filter: drop-shadow(44rpx 0 '+
								back+');transform: translateZ(0px);margin-left: -100%;'"></image>
						</view>
					</view>
					<view class="foSi25" style="">我的企业联系人</view>
				</view>
				<uni-icons size="20" type="right" color="#ded5d5"></uni-icons>
			</view>
			<view class="wid90 mar dis disAl disJuB" style="height: 100rpx;" @click="tiaozhuan('/pages/wode/enterpriseTel')" v-else>
				<view class="dis disAl">
					<view class="" style="width: 80rpx;">
						<view class="mar poRel" style="width: 44rpx;height: 44rpx;">
							<view class="bacFFF poAbs" style="width: 44rpx;height: 44rpx;left: -100%;z-index: 10;"></view>
							<image :src="aurl+iconlist.c2" class="wh100" :style="'filter: drop-shadow(44rpx 0 '+
								back+');transform: translateZ(0px);margin-left: -100%;'"></image>
						</view>
					</view>
					<view class="foSi25" style="">我的联系人</view>
				</view>
				<uni-icons size="20" type="right" color="#ded5d5"></uni-icons>
			</view>
			<view v-if="datalist.usertype > 1" class="xia wid100"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 100rpx;" @click="tiaozhuan('/pages/wode/drafts')" v-if="datalist.usertype > 1">
				<view class="dis disAl">
					<view class="" style="width: 80rpx;">
						<view class="mar poRel" style="width: 44rpx;height: 44rpx;">
							<view class="bacFFF poAbs" style="width: 44rpx;height: 44rpx;left: -100%;z-index: 10;"></view>
							<image :src="aurl+iconlist.c3" class="wh100" :style="'filter: drop-shadow(44rpx 0 '+
								back+');transform: translateZ(0px);margin-left: -100%;'"></image>
						</view>
					</view>
					<view class="foSi25" style="">我的草稿箱</view>
				</view>
				<uni-icons size="20" type="right" color="#ded5d5"></uni-icons>
			</view>
		</view>
		
		<view class="wid87 mar box1 bacFFF borRad20 mar-top30">
			<view class="wid90 mar dis disAl disJuB" style="height: 100rpx;" @click="tiaozhuan('/pages/wode/handbook')">
				<view class="dis disAl">
					<view class="" style="width: 80rpx;">
						<view class="mar poRel" style="width: 35rpx;height: 35rpx;">
							<view class="bacFFF poAbs" style="width: 35rpx;height: 35rpx;left: -100%;z-index: 10;"></view>
							<image :src="aurl+iconlist.c4" class="wh100" :style="'filter: drop-shadow(35rpx 0 '+
								back+');transform: translateZ(0px);margin-left: -100%;'"></image>
						</view>
					</view>
					<view class="foSi25" style="">新用户指南</view>
				</view>
				<uni-icons size="20" type="right" color="#ded5d5"></uni-icons>
			</view>
			<view class="xia wid100"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 100rpx;" @click="tiaozhuan('/pages/wode/aboutUs')">
				<view class="dis disAl">
					<view class="" style="width: 80rpx;">
						<view class="mar poRel" style="width: 44rpx;height: 44rpx;">
							<view class="bacFFF poAbs" style="width: 44rpx;height: 44rpx;left: -100%;z-index: 10;"></view>
							<image :src="aurl+iconlist.c5" class="wh100" :style="'filter: drop-shadow(44rpx 0 '+
								back+');transform: translateZ(0px);margin-left: -100%;'"></image>
						</view>
					</view>
					<view class="foSi25" style="">关于我们</view>
				</view>
				<uni-icons size="20" type="right" color="#ded5d5"></uni-icons>
			</view>
			<view class="xia wid100"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 100rpx;" @click="tiaozhuan('/pages/wode/commonProblem')">
				<view class="dis disAl">
					<view class="" style="width: 80rpx;">
						<view class="mar poRel" style="width: 44rpx;height: 44rpx;">
							<view class="bacFFF poAbs" style="width: 44rpx;height: 44rpx;left: -100%;z-index: 10;"></view>
							<image :src="aurl+iconlist.c6" class="wh100" :style="'filter: drop-shadow(44rpx 0 '+
								back+');transform: translateZ(0px);margin-left: -100%;'"></image>
						</view>
					</view>
					<view class="foSi25" style="">常见问题</view>
				</view>
				<uni-icons size="20" type="right" color="#ded5d5"></uni-icons>
			</view>
		</view>
		<view class="wid87 mar box1 bacFFF borRad20 mar-top30 dis disAl disJuC foSi30" @click="tiaozhuan('/pages/wode/switchIdentity')"
		 style="height: 100rpx;"  v-if="Object.keys(userinfo).length > 0">切换身份</view>
		<view style="height: 100rpx;" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}"></view>
		<tablist v-if="hideTabBar" :back="back" :backTwo="backTwo" :datalist="datalist1" :index="2"></tablist>
		<!-- <uni-popup ref="popup" background-color="#fff" @change="change">
			<view style="height: 20rpx;"></view>
			<view class="hei80 dis disAl disJuC poRel">
				<view class="poAbs hei80 dis disAl" style="left: 40rpx;">
					<view class="mar poRel" style="width: 30rpx;height: 30rpx;" @click="guanbi">
						<view class="bacFFF poAbs" style="width: 30rpx;height: 30rpx;left: -100%;z-index: 10;"></view>
						<image :src="aurl+icon_list.guanbi" class="wh100" :style="'filter: drop-shadow(30rpx 0 '+
							back+');transform: translateZ(0px);margin-left: -100%;'"></image>
					</view>
				</view>
				<view class="foSi35 fowe600" style="">合同验签</view>
			</view>
			<view class="wid100 mar-top20">
				<view class="wid100 dis disJuC">
					<image :src="aurl+icon_list.jianyan" style="width: 377rpx;height: 225rpx;"></image>
				</view>
				<view class="mar-top30 textCen foSi25" style="color: #4D4D4D;">
					<view>上传请使用电子签完成签署的文件</view>
					<view>检测合同是否有效</view>
				</view>
			</view>
			<view class="wid100 dis disAl disJuC" style="margin-top: 40rpx;height: 100rpx;">
				<view class="coFFF wid80 hei80 dis disAl disJuC foSi35 borRad10" 
					:style="{'background-color':back}">上传合同PDF文件</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import tabnav from "../common/tabnav/tabnav.vue"
	import tablist from "../common/tablist/tablist.vue"
	export default {
		components: {
			tabnav,tablist
		},
		data() {
			return {
				hideTabBar: true,
				paddingBottomHeight: 0,
				aurl:this.global.url,
				datalist1: [],
				back: uni.getStorageSync('back'),
				backTwo: uni.getStorageSync('backTwo'),
				// userinfo分两个，一个是个人主账户，一个是正在使用中的账户，账户更换在首页
				userinfo:{} ,// 个人中心使用使用中账号
				token:'',
				datalist:{} ,// 个人中心数据
				icon_list:{
					guanbi:'/addon/qianyu_dzq/wechatimg/guanbi.png',
					qiyeyinzhang:'/addon/qianyu_dzq/wechatimg/qiyeseal.png',
					lianxiren:'/addon/qianyu_dzq/wechatimg/lianxiren.png',
					wodecaogao:'/addon/qianyu_dzq/wechatimg/wodecaogao.png',
					zhinan:'/addon/qianyu_dzq/wechatimg/zhinan.png',
					guanyuwomen:'/addon/qianyu_dzq/wechatimg/guanyuwomen.png',
					changjianwenti:'/addon/qianyu_dzq/wechatimg/changjianwenti.png',
					jianyan:'/addon/qianyu_dzq/wechatimg/jianyan.png',
				},
				iconlist: []
			}
		},
		onLoad() {
			uni.hideTabBar()
			let that = this
			console.log('获取的主色调'+uni.getStorageSync('back'))
			that.setuser()
			uni.$on('Refresh_userinfo',function(data){
				// 监听用户信息刷新，重新获取数据
				console.log('监听到了用户刷新')
				that.setuser()
			})
			uni.$on('login_out',function(data){
				// 监听用户信息刷新，重新获取数据
				console.log('监听到了用户刷新')
				that.userinfo = {}
			})
			this.iconlist = uni.getStorageSync('iconlist')
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function (res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		},
		onShow(){
			var that = this
			that.datalist1 = uni.getStorageSync('datalist')
			if(!uni.getStorageSync('setuser_info')){
				that.setuser()
			}else{
				that.datalist = uni.getStorageSync('setuser_info')
			}
		},
		methods: {
			setuser(){
				var userinfo = uni.getStorageSync('inuse_userinfo');
				console.log('使用中用户信息')
				console.log(userinfo)
				if(userinfo){
					this.userinfo = userinfo
					this.token = uni.getStorageSync('inuse_userinfo_token')
					// this.datalist = userinfo
					this.get_usercenter_data() // 用户个人中心数据
				}
			},
			// 获取用户信息  站点信息site_id挂在main.js sasa系统每个都不同，后期要自动编译
			/* 
			 authlist: []
			 ent_auth: 0  是否完成企业认证 1是0否
			 ent_id: 0  企业信息id
			 ent_name: ""  企业名称
			 id: 101  用户id
			 is_auth: 0   是否完成个人认证
			 is_delete: 1  账号是否被移除
			 main_id: 0  主账户id  0=本身就是主账户
			 mobile: "181****9335"  电话
			 nickname: "电子签用户"  姓名（认证后也是这个）
			 seal: 0   是否有个人印章  1有0没有
			 sign: 0   是否有个人签名  1有0没有
			 status: 1 用户状态  1正常0无法使用
			 usertype: 1  用户类型   1=个人账号（主账户）  2=企业账号（企业法人）  3=员工账号（企业员工）
			 */
			get_usercenter_data(){
				var that = this
				uni.showLoading({
					title:'加载中...'
				})
				uni.login({
				  success: function (loginRes) {
				    console.log(loginRes);
					uni.request({
						url: that.global.url+'api/qianyu_dzq/applet_user_center',
						method: 'POST',
						header:{'site-id':that.global.site_id,'token':that.token},
						data: {},
						success(res) {
						    let result = res.data
							console.log(result);
						    if(result.code == 1){
						       that.datalist = result.data
							   uni.setStorageSync('setuser_info',result.data)
						    }else{
						        uni.showToast({
						            title: result.msg,
						            icon:'none',
									duration: 2000
						        })
						    }
						},
						complete() {
							uni.hideLoading()
						}
					})
				  }
				});
			},
			tiaozhuan(a){
				var url = a
				var userinfo = this.userinfo;
				if(!userinfo){
					url = '/pages/login/login'
				}
				uni.navigateTo({
					url: url
				});
			},
			change(e) {
				if(e.show){
					this.hideTabBar = fasle
				}else{
					setTimeout(()=>{
						this.hideTabBar = true
					},300)
				}
			},
			toggle(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			guanbi(){
				this.$refs.popup.close()
			},
		}
	}
</script>

<style>
	.content {}
	.foSi28{
		font-size: 28rpx;
	}
	.xia{
		height: 1rpx;
		background: #e7e7e7;
	}
</style>
